<template>
  <el-tag
    class="dict-tag"
    :effect="effect"
    :size = "size"
    :color="listClass"
    :hit="false"
  >
    {{ showText }}
  </el-tag>
</template>
<script>
  export default {
    name: 'DictTag',
    data() {
      return{
        showText:'',
        listClass:''
      }
    },
    watch:{
      value(v){
        this.initValue();
      },
      datas(v){
        this.initValue();
      }
    },
    created(){
      this.initValue();
    },
    methods:{
      initValue(){
        if(this.value){
          if(this.datas.length > 0){
            let index = this.datas.findIndex(x=>x.dictValue == this.value)
            if(index!= -1){
              this.showText = this.datas[index].dictLabel;
              this.listClass = this.datas[index].listClass;
            }
          }
        }
      }
    },
    props: {
      type: {
        type: String,
        default: "",
      },
      effect: {
        type: String,
        default: "plain",
      },
      size:{
        type: String,
        default: 'small'
      },
      value:{
        type: String,
        default: ''
      },
      datas:{
        type:Array,
        default:()=>[]
      }
    },
  }
</script>

<style lang="scss" scoped>
  .dict-tag{
    border-color: snow;
    color: #000000;
    font-family: 微软雅黑;
  }

</style>
